<script setup lang="ts">
// import Message from './components/Mwssage/Mwssage.vue'
import { createMessage } from './components/Mwssage/method'
import { onMounted } from 'vue'
onMounted(() => {
  const instance = createMessage({ message: 'hello vue1', duration: 0 })
  setTimeout(() => {
    instance.destroy()
  }, 2000)
})
const open1 = () => {
  createMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
    duration: 0
  })
}
const open2 = () => {
  createMessage({
    message: 'Congrats, this is a success message.',
    type: 'warning',
    duration: 0
  })
}
const open3 = () => {
  createMessage({
    message: 'Warning, this is a  message.',
    type: 'message'
  })
}
const open4 = () => {
  createMessage({
    message: 'Congrats, this is a error message.',
    type: 'error'
  })
}
</script>

<template>
  <!-- 
  1.封装类型属性
  2.内容内部动态传入
  3.组件自动关闭
  4.给关闭的组件注册事件 
  -->

  <div>
    <button @click="open2">成功</button>
    <button @click="open3">警告</button>
    <button @click="open1">消息</button>
    <button @click="open4">错误</button>
    <!-- <Message message="hello vue" :duration="0"></Message> -->
  </div>
</template>

<style scoped></style>
